<template>
  <div style="margin-left: 40px; margin-right: 40px">
    <el-dialog v-dialogDrag title="视频详情" :visible.sync="dialogVisible" width="70%">
      <el-container class="video-container">
        <el-aside class="video-aside">
          <div class="input_video">
            <video-player class="video-player vjs-custom-skin"
                          ref="dialogVideoPlayer"
                          :playsinline="true"
                          :options="getPlayerOptions(activeVideo, true, true, true, true)">
            </video-player>
          </div>
        </el-aside>
        <el-main class="video-main">
          <el-divider></el-divider>
          <span style="margin-right: 10px">视频ID：</span>
          <span style="margin-left: 10px">{{ activeVideo.videoId }}</span>
          <el-divider></el-divider>
          <span style="margin-right: 10px">视频名称：</span>
          <span style="margin-left: 10px">{{ activeVideo.videoName }}</span>
          <el-divider></el-divider>
          <span style="margin-right: 10px">产品名称：</span>
          <span style="margin-left: 10px">{{ activeVideo.productName }}</span>
          <el-divider></el-divider>
          <span style="margin-right: 10px">投放平台：</span>
          <span style="margin-left: 10px">{{ activeVideo.platformName }}</span>
          <el-divider></el-divider>
          <span style="margin-right: 10px">行业：</span>
          <span style="margin-left: 10px">{{ activeVideo.industryName }}</span>
          <el-divider></el-divider>
          <span style="margin-right: 10px">类型：</span>
          <span style="margin-left: 10px">{{ activeVideo.categoryName }}</span>
          <el-divider></el-divider>
          <span style="margin-right: 10px">代理商的简称：</span>
          <span style="margin-left: 10px">{{ activeVideo.userName }}</span>
          <el-divider></el-divider>
          <span style="margin-right: 10px">上传时间：</span>
          <span style="margin-left: 10px">{{ activeVideo.createTime }}</span>
          <el-divider></el-divider>
          <span style="margin-right: 10px">消费金额(30天):</span>
          <span style="margin-left: 10px">{{ format_data(activeVideo.consumptionAmount) }}</span>
          <el-divider></el-divider>
          <span style="margin-right: 10px">点击率(30天):</span>
          <span style="margin-left: 10px">{{ format_percentage(activeVideo.clickRate) }}</span>
          <el-divider></el-divider>
          <span style="margin-right: 10px">转化率(30天):</span>
          <span style="margin-left: 10px">{{ format_percentage(activeVideo.conversionRate) }}</span>
          <el-divider></el-divider>
          <span style="margin-right: 10px">完播率(30天):</span>
          <span style="margin-left: 10px">{{ format_percentage(activeVideo.finishRate) }}</span>
          <el-divider></el-divider>
        </el-main>
      </el-container>
    </el-dialog>
    <el-row :gutter="20" class="content-list" type="flex">
      <el-col :span="6" v-for="(item, index) in contentList" :key="item.id" class="section-content">
        <el-card class="content-item">
          <div @mouseenter="mouse_enter(index)" @mouseleave="mouse_leave(index)" @click="dialog_click(item)">
            <video-player class="video-player vjs-custom-skin"
                          ref="videoPlayer"
                          :playsinline="true"
                          :options="getPlayerOptions(item, false, false, false, false)">
            </video-player>
          </div>
          <ul>
            <li>
              <span class="item-tag">产品</span>
              <span class="item-value">{{ item.productName }}</span>
            </li>
            <li>
              <span class="item-tag">代理商</span>
              <span class="item-value">{{ item.userName }}</span>
            </li>
            <li>
              <span class="item-tag">平台</span>
              <span class="item-value">{{ item.platformName}}</span>
            </li>
            <li>
              <span class="item-tag">行业</span>
              <span class="item-value">{{ item.industryName }}</span>
            </li>
            <li>
              <span class="item-tag">分类</span>
              <span class="item-value">{{ item.categoryName }}</span>
            </li>
            <li>
              <span class="item-tag">视频ID</span>
              <span class="item-value">{{ item.videoId }}</span>
            </li>
          </ul>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import mixin from '../mixins'
import numeral from 'numeral'

export default {
  name: 'content-list',
  mixins: [mixin],
  props: {
    contentList: Array,
    path: String
  },
  data () {
    return {
      dialogVisible: false,
      activeVideo: {}
    }
  },
  methods: {
    getPlayerOptions (video, timeDivider, durationDisplay, remainingTimeDisplay, fullscreenToggle) {
      return {
        playbackRates: [0.5, 1.0, 1.5, 2.0], //可选择的播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: '',
          src: video.videoPath//url地址
        }],
        poster: '', //你的封面地址
        notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          fullscreenToggle: fullscreenToggle,
          timeDivider: timeDivider,
          durationDisplay: durationDisplay,
          remainingTimeDisplay: remainingTimeDisplay,
          currentTimeDisplay: false,
        }
      }
    },
    mouse_enter (index) {
      this.$refs.videoPlayer[index].player.play()
    },

    mouse_leave (index) {
      this.$refs.videoPlayer[index].player.pause()
    },
    format_percentage (data) {
      return numeral(data).format('0.00%')
    },

    format_data (data) {
      return numeral(data).format('0.00')
    },
    dialog_click (video) {
      this.dialogVisible = true
      this.activeVideo = video
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/content-list.scss';
</style>
